<script setup>
import { ref, reactive, computed } from "vue";
import { ElMessage } from "element-plus";
import axios from "../utils/http";
const emit = defineEmits(["update:dialogVisible", "success"]);
const props = defineProps({
  dialogVisible: {
    type: Boolean,
    default: false,
  },
  title: {
    type: String,
    default: "新增",
  },
  editlData: {
    type: Object,
    default: () => {
      return {};
    },
  },
});
const visable = computed({
  get() {
    console.log(props.dialogVisible);

    // 如果读取计算属性的值，默认调用get方法
    return props.dialogVisible;
  },
  set(v) {
    // v是计算属性下传递的实参
    // 如果要想修改计算属性的值，默认调用set方法
    emit("update:dialogVisible", v);
  },
});
let formModel = ref({});
const formRenderer = ref();
const loadingBtn = ref(false);
// 提交
const onSubmit = async () => {
  loadingBtn.value = true;
  try {
    let url = formModel.value._id ? `edit/${formModel.value._id}` : "add";
    await formRenderer.value.methods.validate();
    let data = await axios.post(`/api/profile/${url}`, formModel.value);
    console.log(data);
    ElMessage({
      type: "success",
      message: formModel.value._id ? "编辑成功" : "添加成功",
    });
    visable.value = false;
    emit("success");
  } catch (error) {
    console.log(error);
  } finally {
    loadingBtn.value = false;
  }
};
// 打开前
const handleOpened = () => {
  // 此处不能直接修改父亲组件
  formModel.value = { ...props.editlData };
};

// 关闭
const handleClose = () => {
  loadingBtn.value = false;
  // 因为浅克隆了一份 所以 resetFields方法只清空了子组件内部的值
  // 父组件并没有清空 在次打开会被覆盖 ，父组件需要 清空一下
  formModel.value = {};
  formRenderer.value.resetFields();
};
// 表单
const content = reactive([
  {
    type: "select",
    id: "type",
    label: "请选择身份",
    options: [
      {
        label: "提现",
        value: "提现",
      },
      {
        label: "提现手续费",
        value: "提现手续费",
      },
      {
        label: "充值",
        value: "充值",
      },
      {
        label: "优惠券",
        value: "优惠券",
      },
      {
        label: "充值礼券",
        value: "充值礼券",
      },
      {
        label: "转账",
        value: "转账",
      },
    ],
  },
  {
    type: "input",
    id: "describe",
    label: "收支描述",
    rules: [{ required: true, message: "收支描述不能为空！", trigger: "blur" }],
  },
  {
    type: "input",
    id: "income",
    label: "收入",
    rules: [{ required: true, message: "收入不能为空！", trigger: "blur" }],
  },
  {
    type: "input",
    id: "expend",
    label: "支出",
    rules: [{ required: true, message: "支出不能为空！", trigger: "blur" }],
  },
  {
    type: "input",
    id: "cash",
    label: "账户现金",
    rules: [{ required: true, message: "账户不能为空！", trigger: "blur" }],
  },
  {
    type: "input",
    id: "remark",
    label: "备注",
    el: {
      type: "textarea",
    },
  },
]);
</script>

<template>
  <el-dialog
    v-model="visable"
    :title="title"
    @close="handleClose"
    width="30%"
    @opened="handleOpened"
  >
    <el-form-renderer
      label-width="100px"
      :content="content"
      ref="formRenderer"
      style="padding-right: 30px"
      v-model:FormData="formModel"
    >
    </el-form-renderer>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="visable = false">取消</el-button>
        <el-button :loading="loadingBtn" @click="onSubmit" type="primary">
          确认
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>
